﻿@model Doc_XML.Models.RegisterModel
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<div class="content">
    @using (Html.BeginForm("Register", "User", FormMethod.Post))
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">
       
            <div class="form-group">
                @Html.LabelFor(model => model.ProvinceID, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("ProvinceID", new SelectList(new string[] { }), new { @class = "form-control", @id = "ddlProvince" })
                    @Html.ValidationMessageFor(model => model.ProvinceID, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.DistrictID, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("DistrictID", new SelectList(new string[] { }), new { @class = "form-control", @id = "ddlDistrict" })
                    @Html.ValidationMessageFor(model => model.DistrictID, "", new { @class = "text-danger" })
                </div>
            </div>
          
        </div>
    }
</div>

@section scripts{

    <script>

        var user = {
            init: function () {

                user.loadProvince();
                user.registerEvent();
            },
            registerEvent: function () {
                $('#ddlProvince').off('change').on('change', function () {
                    var id = $(this).val();
                    if (id != '') {
                        user.loadDistrict(parseInt(id));
                    }
                    else {
                        $('#ddlDistrict').html('');
                    }
                });
            },
            loadProvince: function () {

                $.ajax({
                    url: '/TinhHuyen/LoadProvince',
                    type: "POST",
                    dataType: "json",
                    success: function (response) {
                        if (response.status == true) {
                            var html = '<option value="">--Chọn tỉnh thành--</option>';
                            var data = response.data;
                            $.each(data, function (i, item) {
                                html += '<option value="' + item.ID + '">' + item.Name + '</option>'
                            });
                            $('#ddlProvince').html(html);
                        }
                    }
                })
            },
            loadDistrict: function (id) {
                $.ajax({
                    url: '/TinhHuyen/LoadDistrict',
                    type: "POST",
                    data: { provinceID: id },
                    dataType: "json",
                    success: function (response) {
                        if (response.status == true) {
                            var html = '<option value="">--Chọn quận huyện--</option>';
                            var data = response.data;
                            $.each(data, function (i, item) {
                                html += '<option value="' + item.ID + '">' + item.Name + '</option>'
                            });
                            $('#ddlDistrict').html(html);
                        }
                    }
                })
            }
        }
        user.init();


    </script>


}